.MusicCard {
  display: grid;
  grid-template-columns:auto  1fr auto;
  grid-template-rows:100%;
  width: 100%;
  aspect-ratio: 7/1;
  padding: 0.1rem;
  border-radius: 0.5rem;
  transition: 0.3s;
  overflow: hidden;
  cursor: pointer;

  img {
    border-radius: 0.3rem;
    height: 100%;
  }

  > div:nth-child(2) {
    margin-left: 0.5rem;
    font-size: 4cqw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    > p {
      color: var(--text-color-gray);
      font-size: 80%;

      > span {
        font-size: 80%;
        color: var(--gray-50);
      }
    }
  }

  > div:nth-child(3) {
    margin-right: 0.5rem;

    .play-btn {
      height: 50%;
      color: var(--text-color-gray);

    }
  }

}

.MusicCard-active {
  box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px 0;
}